<template>
  <div class="NavBarWrap">
    <ul>
      <li
        :class="{ active: $route.path == '/' + item.path }"
        v-for="item in list"
        :key="item.path"
        @click="toPage(item.path)"
      >
        <img
          :src="
            $route.path == '/' + item.path ? item.meta.icon : item.meta.icon_sel
          "
          alt=""
        />
        {{ item.meta.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: this.$router.options.linkActiveClass,
    };
  },
  computed: {
    list() {
      let routes = this.$router.options.routes[1].children;
      routes = routes.filter((item) => !item.meta.hidden);
      return routes;
    },
  },
  methods: {
    toPage(path) {
      if (this.$route.path == "/" + path) {
        return;
      }
      this.$router.push(path);
    },
  },
};
</script>

<style  scoped lang="scss">
.NavBarWrap {
  width: 200px;
  height: calc(100vh - 80px);
  background: bisque;
  text-align: center;
  li {
    cursor: pointer;
    margin-top: 15px;
    &:hover {
      color: #bbb;
    }
    > img {
      width: 20px;
      height: 20px;
    }
  }
  .active {
    color: #bbb;
  }
}
</style>